<style>
    .image {
        width: 60px;
        height: 60px;
    }
</style>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this" value="0">通用券</li>
                <li value="1">商品券</li>
            </ul>
        </div>
        <input type="hidden" id="type" name="type" value="0">
        <div class="layui-form-item">
            <label class="layui-form-label">优惠券名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" class="layui-input" lay-verify="required" placeholder="请输入优惠券名称"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">优惠券图片</label>
            <div class="layui-input-block layuimini-upload">
                <input name="image"  class="layui-input layui-col-xs6" lay-verify="required"  placeholder="请上传优惠券图片" value="{$row.image|default=''}">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="image" data-upload-number="ten" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                    <span><a class="layui-btn layui-btn-normal" id="select_image" data-upload-select="image" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">优惠券面额</label>
            <div class="layui-input-block">
                <input type="text" name="coupon_price" class="layui-input" lay-verify="required" placeholder="请输入优惠券面额"
                       value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">最低消费金额</label>
            <div class="layui-input-block">
                <input type="text" name="use_min_price" class="layui-input" lay-verify="required"
                       placeholder="请输入最低消费金额" value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">折扣力度</label>
            <div class="layui-input-block">
                <input type="text" name="discount" class="layui-input" lay-verify="required"
                       placeholder="折扣力度 例如：98  代表98折" value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">优惠方式</label>
            <div class="layui-input-block">
                <input type="radio" name="discount_method" value="1" title="满减" checked>
                <input type="radio" name="discount_method" value="2" title="直减">
                <input type="radio" name="discount_method" value="3" title="折扣">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">兑换消耗积分</label>
            <div class="layui-input-block">
                <input type="text" name="integral" class="layui-input" lay-verify="required" placeholder="请输入兑换消耗积分"
                       value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">优惠券有效期限（单位：天）</label>
            <div class="layui-input-block">
                <input type="text" name="coupon_time" class="layui-input" lay-verify="required"
                       placeholder="请输入优惠券有效期限（单位：天）" value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">优惠券领取开启时间</label>
            <div class="layui-input-block">
                <input type="datetime-local" name="start_time" class="layui-input" lay-verify="required"
                       placeholder="请输入优惠券领取开启时间" value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">优惠券领取结束时间</label>
            <div class="layui-input-block">
                <input type="datetime-local" name="end_time" class="layui-input" lay-verify="required" placeholder="请输入优惠券领取结束时间"
                       value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">优惠券领取数量</label>
            <div class="layui-input-block">
                <input type="text" name="total_count" class="layui-input" lay-verify="required" placeholder="请输入优惠券领取数量"
                       value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">优惠券剩余领取数量</label>
            <div class="layui-input-block">
                <input type="text" name="remain_count" class="layui-input" lay-verify="required"
                       placeholder="请输入优惠券剩余领取数量" value="0">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否无限张</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" value="1" name="is_permanent" lay-skin="switch" lay-filter="switchTest" lay-text="是|否">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否首次关注赠送</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" value="1" name="is_give_subscribe" lay-skin="switch" lay-filter="switchTest" lay-text="是|否">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" value="1" name="status" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">
            </div>
        </div>

        <div class="layui-form-item" id="product">
            <label class="layui-form-label">可用商品id</label>
            <div id="images">
                <img src="__STATIC__/admin/images/+.jpg" id="image" data-method="offset" style="border: 1px dashed black;" class="image">
            </div>
            <input type="hidden" id="goods_id" name="goods_id">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" class="layui-input" lay-verify="required" placeholder="请输入排序" value="0">
            </div>
        </div>
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>

<script>
    layui.use(['jquery', 'form', 'upload', 'element', 'layer'], function () {
        var $ = layui.jquery;
            layer = layui.layer;
            upload = layui.upload;

        var active = {
            offset: function(othis) {
                var type = othis.data('type')

                //添加商品
                layer.open({
                    type: 2
                    , area: ['800px','600px']
                    , offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    , id: 'layerDemo' + type //防止重复弹出
                    , content: "{:url('store.goods/selectGoods')}"
                    , btnAlign: 'c' //按钮居中
                    , shade: 0 //不显示遮罩
                    , yes: function () {
                        layer.closeAll();
                    }
                });
            }
        }

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: "{:url('upFile')}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                console.log(res.url)
                $("#image").val(res.url)
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });


        $('.image').on('click', function(){
            console.log(111);
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

        $('#product').hide();

        //type 1 商品券   0 通用券
        $("li").click(function () {
            let type = $(this).val();
            $('#type').val(type);
            if (type == 1) {
                $('#product').show();
            }else {
                $('#product').hide();
            }
        })
    })

</script>